import React from 'react'
import {
  BorderBox1,
  Decoration1,
  ActiveRingChart,
  CapsuleChart,
  WaterLevelPond,
  PercentPond,
  FlylineChart,
} from '@jiaminghi/data-view-react'
import {
  ActiveRingChartConfig,
  CapsuleChartConfig,
  WaterLevelPondConfig,
  PercentPondConfig,
  FlylineChartConfig,
} from './config'

const ReactDataV = () => {
  return (
    <div>
      <div className="dataV-full-layout">
        <BorderBox1>
          <div className="dataV-decoration">
            <Decoration1 style={{ width: '200px', height: '50px' }} />
            <Decoration1 style={{ width: '200px', height: '50px' }} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-around' }}>
            <ActiveRingChart
              config={ActiveRingChartConfig}
              style={{ width: '200px', height: '200px' }}
            />
            <CapsuleChart
              config={CapsuleChartConfig}
              style={{ width: '200px', height: '200px' }}
            />
            <WaterLevelPond
              config={WaterLevelPondConfig}
              style={{ width: '150px', height: '200px' }}
            />
            <PercentPond
              config={PercentPondConfig}
              style={{ width: '200px', height: '200px' }}
            />
          </div>
          <FlylineChart
            config={FlylineChartConfig}
            style={{ width: '400px', height: '300px' }}
            dev={true}
          />
        </BorderBox1>
      </div>
    </div>
  )
}

export default ReactDataV
